<template>
  <div class="role-div">
    <el-input v-model="roleName" placeholder="要添加的角色名称"/>
    <br>
    <el-button type="primary" @click="addRole">添加</el-button>
    <el-button type="danger" @click="delRole">删除</el-button>
    <ul>
      <li v-for="roleInfo in roleInfoList">
        <el-radio @change="selMenuByRole" v-model="checkedRoleId" name="role" :value="roleInfo.roleId">
          {{ roleInfo.roleName }}
        </el-radio>
      </li>
    </ul>
  </div>
  <div class="menu-div">
    <el-tree
        style="max-width: 600px"
        ref="treeRef"
        :data="menuList"
        show-checkbox
        node-key="nodeId"
        :default-expand-all="true"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        :props="defaultProps"
    />
    <el-button type="primary" @click="addRoleMenu">保存</el-button>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted} from "vue";
import api from "@/axios.js";
import {ElMessage, type ElTree} from "element-plus";

interface RoleInfo {
  roleId?: Number,
  roleName?: String
}

interface SysFun {
  nodeId?: Number,
  displayName?: String,
  childList?: SysFun[]
}

onMounted(() => {
  selRoleInfo();
  selSysFun();
})

const treeRef = ref<typeof ElTree>();
// 角色列表
const roleInfoList = ref<RoleInfo[]>([]);
// 选中的角色
const checkedRoleId = ref<Number>(0);
// 添加角色
const roleName = ref<String>('');
// 菜单列表
const menuList = ref<SysFun[]>([]);


function selRoleInfo() {
  api({url: "/selRoleInfo", method: "post"}).then(resp => {
    roleInfoList.value = resp.data;
  })
}

function addRole() {
  if (roleName.value == "") {
    ElMessage("角色名不能为空")
    return;
  }
  // 结束当前函数
  api({
        url: "/addRole"
        , params: {"roleName": roleName.value}
      }
  ).then(resp => {
    ElMessage(resp.data.message);
    if (resp.data.code == 1)
      selRoleInfo(); // 当成功时，重新进行查询
  });
}

// 删除角色
function delRole() {
  if (checkedRoleId.value == 0) {
    ElMessage("请选择一个角色再点击删除");
    return;
  }
  api({
    url: "/delRole"
    , params: {roleId: checkedRoleId.value}
  }).then(resp => {
    ElMessage(resp.data.message);
    if (resp.data.code == 1) {
      selRoleInfo();
      treeRef.value?.setCheckedKeys([]);
    }
  });
}

function selSysFun() {
  api({url: "/selSysFun"}).then(resp => {
    // 将后端返回的数据赋给vue
    menuList.value = resp.data;
  });
}

// 根据角色查询拥有的菜单
function selMenuByRole() {
  api({
    url: "/selRoleMenu",
    params: {"roleId": checkedRoleId.value}
  }).then(resp => {
    console.log(resp.data)
    treeRef.value?.setCheckedKeys(resp.data);
  })
}

// 保存角色
function addRoleMenu() {
  api({
    url: "/addRoleMenu",
    params: {
      roleId: checkedRoleId.value,
      menuList: treeRef.value?.getCheckedKeys().join(",")
    }
  }).then(resp => {
    ElMessage(resp.data.message);
  })
}

const defaultProps = {
  children: 'childList',
  label: 'displayName',
}

</script>

<style scoped>
.role-div, .menu-div {
  float: left;
}

.role-div {
  width: 30%;
}

.menu-div {
  width: 68%;
  padding-left: 20px;
}
</style>